<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!--标准mui.css-->
	<link rel="stylesheet" href="css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/app.css" />

	<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
	<style>
		body {
			position: relative;
		}

		.mui-table h4,
		.mui-table h5,
		.mui-table .mui-h5,
		.mui-table .mui-h6,
		.mui-table p {
			margin-top: 0;
		}

		.mui-table h4 {
			line-height: 21px;
			font-weight: 500;
		}

		.mui-table .oa-icon {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.mui-table .oa-icon-star-filled {
			color: #f14e41;
		}

		#mask {
			background: #000;
			opacity: 0.75;
			filter: alpha(opacity=75);
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1000;
		}

		.reply {
			position: absolute;
			width: 60px;
			line-height: 30px;
			background: #ddd;
			text-align: center;
			font-size: 15px;
			opacity: 0.5;
		}

		#replybox {
			z-index: 1001;
			margin: 0 auto;
			position: fixed;
		}

		.reply-input {
			width: 100%;
			height: 60%;
		}

		.btn {
			position: absolute !important;
			bottom: 0;
			right: 0;
		}

		#close {
			position: absolute;
			top: 0;
			right: 10px;
			color: #fff;
			z-index: 9999;
			font-size: 30px;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">我的消息</h1>
	</header>
	<div class="mui-content">
		<ul id="msglist" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		</ul>
	</div>
	<div class="reply" style="display:none;">回复</div>

</body>
<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script src="js/mui.js"></script>
<script type="text/javascript">
	mui.init({
		gestureConfig: {
			tap: true, //默认为true
			doubletap: true, //默认为false
			longtap: true, //默认为false
			swipe: true, //默认为true
			drag: true, //默认为true
			hold: false, //默认为false，不监听
			release: false //默认为false，不监听
		}
	});

	window.addEventListener('toggle', function (event) {
		if (event.target.id === 'M_Toggle') {
			var isActive = event.detail.isActive;
			var table = document.querySelector('.mui-table-view');
			var card = document.querySelector('.mui-card');
			if (isActive) {
				card.appendChild(table);
				card.style.display = '';
			} else {
				var content = document.querySelector('.mui-content');
				content.insertBefore(table, card);
				card.style.display = 'none';
			}
		}
	});
	var senderid = window.localStorage.getItem('id');
	var count = 0;
	var num = 0;
	var listlength = 0;
	var start = 0;

	(function ($, doc) {
			$.init({
				pullRefresh: {
					container: '.mui-content',
					up: {
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了',
						callback: pullupRefresh
					}
				}
			});
			var portid = window.localStorage.getItem('portid1');
			var porttype = window.localStorage.getItem('porttype1');
			var receiverid;
			var receivername;
			var porttitle = window.localStorage.getItem('porttitle1');

			function pullupRefresh() {
				setTimeout(function () {
					count++;
					//						alert(count);
					//						alert(num);
					$('.mui-content').pullRefresh().endPullupToRefresh(count > num); //参数为true代表没有更多数据了。
					if (!(count > num)) {
						var url = servicePath + "sechandcar/app/sendmsg/selectCarBySenderid";
						mui.ajax(url, {
							data: {
								senderid: senderid
							}, //把json转换为字符串
							//data:'data='+JSON.stringify(data),  //把json转换为字符串
							dataType: 'json', //返回数据格式
							type: 'get', //请求方式
							contentType: "application/x-www-form-urlencoded; charset=utf-8", //处理中文乱码
							timeout: 5000000, //超时时间设置，单位毫秒;访问失败就执行  
							error: function (xhr, type, errorThrown) {
								mui.toast("网络连接超时啦~");
							},
							success: function (data) {
								console.log("pullupRefresh方法");
								var lli = "";
								add(data);
							}
						});
					}

				}, 500);
			}

			$.plusReady(function () {
				var url = servicePath + "sechandcar/app/sendmsg/selectCarBySenderid";
				mui.ajax(url, {
					data: {
						senderid: senderid
					}, //把json转换为字符串
					dataType: 'json', //返回数据格式
					type: 'get', //请求方式
					async: false,
					success: function (data) {
						console.log(url);
						console.log(senderid);
						console.log("$.plusReady");
						listlength = data.length;
						if (listlength > 10) {
							num = Math.ceil((listlength - 10) / 10);
						}
						if (data.length <= 10) {
							//alert(data);
							for (var i = 0; i < data.length; i++) {
								var li = '<li class="mui-table-view-cell" data-portid="' + data[i]
									.portid + '" data-porttype="' + data[i].porttype +
									'" data-senderid="' + data[i].senderid + '" data-sendername="' +
									data[i].sendername + '" data-receiverid="' + data[i].receiverid +
									'" data-receivername="' + data[i].receivername +
									'" data-porttitle="' + data[i].porttitle + '">';
								li += '<div class="mui-table">';
								li += '<div class="mui-table-cell mui-col-xs-10">';
								li += '<h4>' + data[i].porttitle + '</h4>';
								li += '<p class="mui-h6">' + data[i].sendername + ':' + data[i]
									.msgcontent + '</p>';
								if (data[i].senderid == senderid) {
									li += '<p class="mui-h6">' + data[i].addtime +
										'<span class="mui-icon mui-icon-redo"></span></p>';
								} else {
									li += '<p class="mui-h6">' + data[i].addtime +
										'<span class="mui-icon mui-icon-undo"></span></p>';
								}
								li += '</div>';
								li += '</div>';
								li += '</li>';
								document.getElementById('msglist').innerHTML += li;
							}
						} else if (data.length > 10) {
							//alert(data);
							for (var i = 0; i < 10; i++) {
								var li = '<li class="mui-table-view-cell" data-portid="' + data[i]
									.portid + '" data-porttype="' + data[i].porttype +
									'" data-senderid="' + data[i].senderid + '" data-sendername="' +
									data[i].sendername + '" data-receiverid="' + data[i].receiverid +
									'" data-receivername="' + data[i].receivername +
									'" data-porttitle="' + data[i].porttitle + '">';
								li += '<div class="mui-table">';
								li += '<div class="mui-table-cell mui-col-xs-10">';
								li += '<h4>' + data[i].porttitle + '</h4>';
								li += '<p class="mui-h6">' + data[i].sendername + ':' + data[i]
									.msgcontent + '</p>';
								if (data[i].senderid == senderid) {
									li += '<p class="mui-h6">' + data[i].addtime +
										'<span class="mui-icon mui-icon-redo"></span></p>';
								} else {
									li += '<p class="mui-h6">' + data[i].addtime +
										'<span class="mui-icon mui-icon-undo"></span></p>';
								}
								li += '</div>';
								li += '</div>';
								li += '</li>';
								document.getElementById('msglist').innerHTML += li;
							}
							start = 10;
						}

						//								var li = '<li class="mui-table-view-cell">';
						//								li += '<div class="mui-table">';
						//								li += '<div class="mui-table-cell mui-col-xs-10">';
						//								li += '<h4>' + data[i].porttitle + '</h4>';
						//								li += '<p class="mui-h6">' + data[i].sendername + ':' + data[i].msgcontent + '</p>';
						//								if(data[i].senderid == senderid) {
						//									li += '<p class="mui-h6">' + data[i].addtime + '<span class="mui-icon mui-icon-redo"></span></p>';
						//								} else {
						//									li += '<p class="mui-h6">' + data[i].addtime + '<span class="mui-icon mui-icon-undo"></span></p>';
						//								}
						//								li += '</div>';
						//								li += '</div>';
						//								li += '</li>';
						//								document.getElementById('msglist').innerHTML += li;

					}
				});
			});


		}
		(mui, document));

	function add(data) {
		console.log("add()方法");
		var len = 0;
		for (var i = start; i < data.length; i++) {
			if (len < 10) {
				start++;
				len++;
				var li = '<li class="mui-table-view-cell" data-portid="' + data[i].portid + '" data-porttype="' + data[i]
					.porttype + '" data-senderid="' + data[i].senderid + '" data-sendername="' + data[i].sendername +
					'" data-receiverid="' + data[i].receiverid + '" data-receivername="' + data[i].receivername +
					'" data-porttitle="' + data[i].porttitle + '">';
				li += '<div class="mui-table">';
				li += '<div class="mui-table-cell mui-col-xs-10">';
				li += '<h4>' + data[i].porttitle + '</h4>';
				li += '<p class="mui-h6">' + data[i].sendername + ':' + data[i].msgcontent + '</p>';
				if (data[i].senderid == senderid) {
					li += '<p class="mui-h6">' + data[i].addtime + '<span class="mui-icon mui-icon-redo"></span></p>';
				} else {
					li += '<p class="mui-h6">' + data[i].addtime + '<span class="mui-icon mui-icon-undo"></span></p>';
				}
				li += '</div>';
				li += '</div>';
				li += '</li>';
				document.getElementById('msglist').innerHTML += li;
			}
		}
	}
	var portidd;
	var porttyped;
	var senderidd;
	var sendernamed;
	var receiveridd;
	var receivernamed;
	var porttitled;
	var moveflag;
	mui('.mui-table-view').on('longtap', '.mui-table-view-cell', function () {
		console.log($(this));
		portidd = $(this).data('portid');
		porttyped = $(this).data('porttype');
		receiveridd = $(this).data('senderid');
		receivernamed = $(this).data('sendername');
		senderidd = $(this).data('receiverid');
		sendernamed = $(this).data('receivername');
		porttitled = $(this).data('porttitle');
		var that = this;
		timeOutEvent = setTimeout(function () {
			//此处为长按事件-----在此显示遮罩层及删除按钮
			var leftLi = that.offsetLeft;
			//alert(leftLi);  
			var topLi = that.offsetTop;
			//alert(topLi);  
			var liWidth = that.offsetWidth;
			//alert(liWidth);
			var liHeight = that.offsetHeight;
			//alert(liHeight);
			var left = leftLi + liWidth / 4 * 3 + 'px';
			//alert(left);
			var top = topLi + liHeight + 'px';
			//alert(top);
			var reply = document.getElementsByClassName("reply")[0];
			reply.style.left = left;
			reply.style.top = top;

			//alert(reply_box.top); 
			//alert(reply_box.style.width);    
			//alert(reply_box.style.height);
			$(".reply").css("display", "block");
		}, 500);
	});
	$('.reply').click(function () {
		moveflag = 1;
		var mask = document.createElement("div");
		mask.id = "mask";
		//窗口可视区域高度
		var cheight = document.documentElement.clientHeight || document.body.clientHeight;
		var close = document.createElement("div");
		close.id = "close";
		close.innerHTML = "X";
		document.body.appendChild(close);
		mask.style.height = cheight + "px";
		//宽度直接用100%在样式里  
		document.body.appendChild(mask);
		var replybox = document.createElement("div");
		replybox.id = "replybox";
		replybox.innerHTML = '<textarea id="msgcontent" type="text" class="reply-input">' + '</textarea>' +
			'<input type="submit" class="btn" onclick="reply()"/>';
		document.body.appendChild(replybox);
		var cwidth = document.documentElement.clientWidth || document.body.clientWidth;
		var cheight = document.documentElement.clientHeight || document.body.clientHeight;
		replybox.style.width = cwidth + 'px';
		replybox.style.height = "100px";
		//reply_box.style.left = (cwidth - 200)/2 + "px";
		//alert(reply_box.left);
		replybox.style.top = (cheight - 100) / 2 + "px";
		//$("#replybox").css("display", "block");
	});

	function reply() {
		var msgcontent = $("#msgcontent").val();
		if ($('#msgcontent').val() == '') {
			alert('消息内容不能为空');
			$('#msgcontent').focus();
			return;
		}
		$.ajax({
			type: "post",
			data: {
				"portid": portidd,
				"porttype": porttyped,
				"senderid": senderidd,
				"sendername": sendernamed,
				"receiverid": receiveridd,
				"receivername": receivernamed,
				"porttitle": porttitled,
				"msgcontent": msgcontent,
				"readflag": '0'
			},
			async: false,
			url: servicePath + "sechandcar/app/sendmsg/saveappmsg",
			dataType: 'json',
			success: function (data) {
				if (data == 'success') {
					alert('发送成功');
					//window.location.href="mymsglist.html";
					// event.stopPropagation();
					var mask = document.getElementById("mask");
					var close = document.getElementById("close");
					var replybox = document.getElementById("replybox");
					document.body.removeChild(mask);
					document.body.removeChild(close);
					document.body.removeChild(replybox);
					$(".reply").css("display", "none");
					location.reload();
				} else {
					alert('发送失败');
				}
				//window.history.back(-1);
			}
		});
	}

	$("body").on("click", '#close', function () {
		//event.stopPropagation();
		var mask = document.getElementById("mask");
		var close = document.getElementById("close");
		var replybox = document.getElementById("replybox");
		document.body.removeChild(mask);
		document.body.removeChild(close);
		document.body.removeChild(replybox);
		$(".reply").css("display", "none");
	})

	/*document.body.addEventListener("touchmove", function (event) {
	    if(moveflag == 1){
	    	event.preventDefault();
	    }
	}, { passive: false });  */
</script>

</html>